<template>
  <list-page
    :pager="pager"
    :showSelectSearch="false"
    :showSearch="false"
    placeholder="请输入合同名称"
    hideShadow
    :selectList="[20,30,50]"
    @searchByKey="searchByKey"
    @changePageSize="changePageSize"
    @changeCurrentPage="changeCurrentPage"
    @selectionChange="selectionChange"
    @clearSearchKeywords="getListData({clientProviderName: '', current: 1})"
  >
    <template slot="table">
      <el-table :data="contractData" align="center" ref="multipleTable">
        <el-table-column label="序号" width="60" type="index"></el-table-column>
        <el-table-column label="合同编码" prop="contractCode"></el-table-column>
        <el-table-column label="物业名称" prop="propertyNames"></el-table-column>
        <el-table-column label="合同状态" prop="status">
          <template slot-scope="scope">{{scope.row.status | dict('rent_contract_status')}}</template>
        </el-table-column>
        <el-table-column label="租赁资源" prop="propertyNames"></el-table-column>
        <el-table-column label="租赁面积(m²)" prop="buildingArea"></el-table-column>
        <el-table-column label="合同开始日期" prop="startDate">
          <template slot-scope="scope">{{formatDate(scope.row.startDate) }}</template>
        </el-table-column>
        <el-table-column label="合同结束日期" prop="endDate">
          <template slot-scope="scope">{{formatDate(scope.row.endDate) }}</template>
        </el-table-column>
        <el-table-column label="合同签订日期" prop="signDate">
          <template slot-scope="scope">{{formatDate(scope.row.signDate) }}</template>
        </el-table-column>
        <el-table-column label="合同总租金(元)" prop="totalAmount"></el-table-column>
      </el-table>
    </template>
  </list-page>
</template>

<script>
import pager from '@/assets/vue-mixin/pager'
import { get } from "~/utils/dbl"
import { mapState } from 'vuex'
import { getReContract } from '../api/lessor.js'
export default {
  name: "contract-info",
  mixins: [pager],
  props: ['pid'],
  propertyNames: ['propertyNames'],
  mounted () {
    this.getListData();
  },
  data () {
    return {
      // 表格列表数据
      contractData: [],
      // 请求参数
      params: {
        current: 1,
        size: 20,
        propertyNames: ''
      },
      // 选中的数据
      selectDataArr: [],
      // 分页
      pager: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      // 页面loading
      loading: false,
    }
  },
  methods: {
    formatDate (date) { //设置时间转换格式

      date = new Date(date)
      var y = date.getFullYear();  //获取年

      var m = date.getMonth() + 1;  //获取月

      m = m < 10 ? '0' + m : m;  //判断月是否大于10

      var d = date.getDate();  //获取日

      d = d < 10 ? ('0' + d) : d;  //判断日期是否大10

      return y + '-' + m + '-' + d;  //返回时间格式

    },
    searchReset () {
      // console.log("====searchReset")
      //清空选中的数据
      this.searchForm = {}
      //重新查询
      this.resetList()
    },


    // 数据请求
    getListData (params = {}) {
      this.loading = true
      let requestData = { ...this.params, ...params }
      getReContract(Object.assign(
        requestData,
        {
          lessorId: this.pid
        })).then(res => {
          const { current, size, total, records } = res.data.data
          this.contractData = records
          this.params = requestData
          this.pager = {
            total,
            currentPage: current,
            pageSize: size
          }
        }).finally(() => {
          this.loading = false
        })
    },
    // 搜索监听
    searchByKey (val) {
      this.getListData({ propertyNames: val, current: 1 });
      this.resetList()
    },
    // 选中监听
    selectionChange (val) {
      this.selectDataArr = val;
    },
    // 修改单页数据条数
    changePageSize (size) {
      this.getListData({ current: 1, size })
    },
    // 翻页
    changeCurrentPage (current) {
      this.getListData({ current })
    },
  }
}
</script>

